<div class="pop_up">
    <div class="pop_up_main">
        <div class="pop_up_tab">
            <div class="tab attrSetTab">
                <a href="javascript:void(0)" rel="diy_baseSet" class="on">基本设置</a>
                <a href="javascript:void(0)" rel="diy_customContent">模板设置</a>
            </div>
        </div>
        <div class="pop_up_box">
            <ul class="pop_up_box_form" id="diy_baseSet">
                <li>
                    <div class="c1">
                        数据源 ：
                    </div>
                    <div class="c2">
                        <label>
                            <input checked="checked" name="source" rel="board_input" class="param_post radio_select in_mr5" type="radio" value="board"/>仅选板块
                        </label>&nbsp;
                        <label>
                            <input name="source" rel="cate_input" type="radio" value="cate" class="param_post radio_select in_mr5" />选择频道下的分类
                        </label>
						 <label>
                            <input name="source" rel="user_input" type="radio" value="user" class="param_post radio_select in_mr5" />指定用户Id
                        </label>
                        <label>
                            <input name="source" rel="ids_input" type="radio" value="ids" class="param_post radio_select in_mr5" />指定帖子Id
                        </label>
						
						 <div id="board_input" class="param_select" style="">
                            <select name="select" size="10" multiple="multiple" id="board" style="width:90%;" class="text param_post">
							<php>$tempCate = explode(',',$attr['board']);</php>
                                <volist name="board" id="vo">
                                    <optgroup label="{$vo.t}">
                                        <volist name="vo.d" id="so">
                                            <option value="{$so.a}" <php>if(in_array($so['a'],$tempCate)){ echo 'selected' ;} </php>>&nbsp;&nbsp;&nbsp;&nbsp;{$so.t}</option>
                                        </volist>
                                    </optgroup>
                                </volist>
                            </select>
                        </div>
						
 						<div id="cate_input" class="param_select" style="display:none;">
                            <select name="select" size="10" multiple="multiple" id="cate" style="width:90%;" class="text param_post">
							<php>$tempCate = explode(',',$attr['cate']);</php>
                                <volist name="cate" id="vo">
                                    <optgroup label="{$vo.name}">
                                        <volist name="vo.cate" id="so">
                                            <option value="{$so.id}" <php>if(in_array($so['id'],$tempCate)){ echo 'selected' ;} </php>>&nbsp;&nbsp;&nbsp;&nbsp;{$so.name}</option>
                                        </volist>
                                    </optgroup>
                                </volist>
                            </select>
                        </div>
						<div id="user_input" style="display:none;" class="param_select">
                            <textarea cols="" rows="5" id="user" class="text param_post" style="width:90%;"/>
               				请输入用户Id或者用户的域认证帐号,以逗号(,)分割
                        </div>
						
                        <div id="ids_input" style="display:none;" class="param_select">
                            <textarea cols="" rows="5" id="ids" class="text param_post" style="width:90%;"/>
               				请输入文章Id,以逗号(,)分割
                        </div>

                    </div>
                </li>
				<li>
                    <div class="c1">
                        排序：
                    </div>
                    <div class="c2">
                        <select name="u" id="order" class="param_post text">
                            <option value="id" selected="selected">时间排序</option>
                            <option value="dig">被dig数</option>
							<option value="viewcount">被查看数</option>
							<option value="replycount">被回复数</option>
                        </select>
                        <select name="u" id="order_t" class="param_post text">
                            <option value="DESC" selected="selected">倒序（新到旧，大到小）</option>
                            <option value="ASC">正序（旧到新，小到大）</option>
                        </select>
                    </div>
                </li>
                <li>
                    <div class="c1">
                        结果数：
                    </div>
                    <div class="c2">
                        <input id="limit" value="10" class="param_post text"/>
                    </div>
                </li>
                <li>
                    <div class="c1">
                        标题：
                    </div>
                    <div class="c2">
                        <input id="title" value="" class="param_post text"/>
                    </div>
                </li>
								 <li>
                    <div class="c1">
                        标题截取：
                    </div>
                    <div class="c2">
                        <input id="words" value="10" class="param_post text"/>
                    </div>
                </li>
                <li>
                    <div class="c1">
                        模板：
                    </div>
                    <div class="c2">
                        <select name="u" id="style" class="param_post text" onchange="changStyle($(this))">
                            <option value="sim_list" selected="selected">数字排行</option>
							<option value="list">一栏只有标题</option>
							<option value="list_cate">一栏标题和分类</option>
							<option value="list_user">一栏标题和作者</option>
							<option value="2col">两行只有标题</option>
							<option value="2col_cate">两栏标题和分类</option>
							<option value="2col_user">两栏标题和作者</option>
							<option value="top_2">重点图文型</option>
                            <php>
                                if(isset($html)){
                            </php>
                            <option value="{$attr['style']}" selected="selected">自定义模板</option>
                            <php>
                                }
                            </php>
                        </select>
                        <a class="ml5" href="javascript:void(0)" onclick="editTpl($('#style').val())">编辑模板</a>
                    </div>
                </li>
                <li>
                    <div class="c1">
                        模板高度：
                    </div>
                    <div class="c2">
                        <input id="tplHeight" value="" class="param_post text"/>(请输入完整高度。px为单位。可以为百分比)
                    </div>
                </li>
				<li id="uploadAttach" style="display:none;">
                    <div class="c1">
                        上传图片：
                    </div>
                    <div class="c2">
                        {:W( 'UploadAttach',array( 'uid'=>$mid , 'type'=>'diy' , 'callback'=>'attach_upload_success','allow_exts'=>"bmp,gif,jpg,png") )}
                    </div>
                </li>
				<li>
					 <div class="c1">
                        右角链接：
                    </div>
                    <div class="c2">
                    	<ul id="diy_links_items">
	                    	<li class="link_items1">
	                             	标题:  <input type="text" rel="linkItemsComment1" class="linkItems" /> 链接：<input type="text" id="linkItemsComment1"/><a href="javascript:void(0)" class="dellinkHref" rel="1">删除</a>
	                        </li>
	                        <li class="link_items2">
	                             	标题:  <input type="text" rel="linkItemsComment2" class="linkItems" /> 链接：<input type="text" id="linkItemsComment2"/><a href="javascript:void(0)" class="dellinkHref" rel="2">删除</a>&nbsp;&nbsp;<a href="javascript:void(0)" class="addlinkHref" rel="2">增加</a>
	                        </li>
						</ul>
                    </div>
				</li>
            </ul>
            <ul class="pop_up_box_form" id="diy_customContent" style="display:none;">
                <li>
                    <div class="c1">
                        修改模板：
                    </div>
                    <div class="c2">
                        <textarea cols="" rows="5" id="customContent" class="text" style="width:90%;overflow: auto;height:400px;">{$html}</textarea>
                        <br/>
                    </div>
                </li>
                <li>
                    <div class="c1">
                        &nbsp;
                    </div>
                    <div class="c2">
                        <input class="btn_sea" type="submit" id="diy_saveTpl" value="保存模板">
                        <br/>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div id="preview" class="preview_r">
    </div>
</div>
<script>
                                                                	var index= '{$index}';
                                                                	var layout = '{$layout}';
                                                                	var parentId = '{$parentId}';
                                                                	var id = '{$id}';
                                                                	var namespace = '{$_GET['tagName']}';
                                                                    var postData = new Array();
                                                                    var defaultAttr = new Array();
                                                                    var hasDefault = false;
                                                                    var TplContent = "";
                                                                    var customTpl = '';
                                                                    var time = 'custom{:time()}';
                                                                    var sign = "{$_GET['sign']}"
                                                                    var customTplCount = 1;
                                                                    var tplData = new Array();
																	var defaultlinkCount = '{$tabCount}' || 2;
        															var linkItem = '';
            						
            						<php>if(!empty($attr)){</php>
            							hasDefault = true;
            						<php>}</php>
            				
                            <volist name="attr" id="vo">
								<php>if($key == 'head_link'){</php>
									defaultAttr["{$key}"] = {$vo};
								<php>}else{</php>
            						defaultAttr["{$key}"] = "{$vo}";
								<php>}</php>
            				</volist>
            				    $(function(){
								customTpl = $('#customContent').val();

                                if (hasDefault) {
                                    $('.param_post').each(function(){
                                        if ($(this).attr('type') == "radio") {
                                            var name = $(this).attr('name');
                                            if ($(this).val() == defaultAttr[name]) {
                                               		$(this).attr('checked','checked');
            										if(name == "source"){
            											var tempId = $(this).attr('rel');
            											$('#' + tempId).show();
            	                                        $('#' + tempId + " textarea").focus();
            											$('#' + tempId + " select").focus();
            	                                        $('.param_select').not($('#' + tempId)).hide();
            										}
                                            }
                                        }else if($(this).attr('type') == "checkbox"){
            								 var name = $(this).attr('name')
            								
            								 if(defaultAttr[name].indexOf(',') != -1){
            								 	 var tempArray = defaultAttr[name].split(',');
            									 if ($.inArray($(this).val(),tempArray) != -1) {
            	                                   		$(this).attr('checked','checked');
            	                                }
            								 }
            	
            							}
                                      	else{
            								if( !$(this).attr('multiple') || $(this).attr('multiple') == 'undefined'){
            									$(this).val(defaultAttr[$(this).attr('id')]);
            								}
            							}
                                    });
									
									for(var one in defaultAttr["head_link"]){
										if(one <=1){
											var tempId = parseInt(one)+1;
											$('.link_items'+tempId+' input:first').val(defaultAttr["head_link"][one]['title']);
											$('#linkItemsComment'+tempId).val(defaultAttr["head_link"][one]['url']);
										}
									}
                               }
                              headlink();
                });
				
												function headlink(){
													linkItem = $('#diy_links_items').children(':first').clone();
				    								$('.dellinkHref').live('mouseup',function(){
				    									var rel = $(this).attr('rel');
				    									dellinkItems(rel);
				    									return false;
				    								});
				    								$('.addlinkHref').live('mouseup',function(){
				    									var rel = $(this).attr('rel');
				    									addlinkItems($(this),rel);
				    									return false;
				    								});
												}
												function dellinkItems(itemCount){
        											$('.link_items'+itemCount).remove();
        										}
        						
				        						function addlinkItems(_this,itemCount){
				        							var newItem = linkItem.clone();
				    								var temp = _this.clone();
				        							var rel = _this.attr('rel');
													defaultlinkCount ++;
				    								_this.remove();
				    								temp.attr('rel',defaultlinkCount);
				        							newItem.removeClass().addClass('link_items'+defaultlinkCount)
				    													 .find('a')
				    													 .attr('rel',defaultlinkCount)
				    													 .end()
																		 .find('input:first')
																		 .attr('rel','linkItemsComment'+defaultlinkCount)
																		 .end()
																		 .find('input[id=linkItemsComment1]')
																		 .attr('id','linkItemsComment'+defaultlinkCount)
																		 .end()
				    													 .find('span')
				    													 .append('&nbsp;')
				    													 .append(temp);
				        							$('#diy_links_items').append(newItem);
				        						}
												
 function preview(){
                                var sendData = getPostData();
                                $.ajax({
                                    type: "POST",
                                    url: APP + '&mod=Diy&act=previewModel',
                                    data: sendData,
                                    dataType: 'json',
                                    success: function(result){
                                        $('#preview').html(result.html);
                                        var content = '<div id="diy_copyHtmlContent">\
                                            		复制源代码:<input type="text" id="copyHtmlContent" onclick="select();" style="width:150px;" />\
                                        		</div>'
										var widget = '<div id="diy_copyHtmlContent">\
                                            		复制标签:<input type="text" id="copyWidgetContent" onclick="select();" style="width:150px;" />\
                                        		</div>'		
                                        $('#preview').append(content);
										$('#preview').append(widget);
                                        $('#diy_copyHtmlContent');
                                        $('#copyHtmlContent').val(result.html).bind('click',function(){
											copyToClipboard(result.html);
										});
										$('#copyWidgetContent').val(result.widget).bind('click',function(){
											copyToClipboard(result.widget);
										});
										//$('#copyHtml').click();
                                    }
                                });
                            }
							


                                                                	
                                                                	function savemodel(){
                            											var sendData = getPostData();
                                                            			$.ajax({
                                                            				type : "POST",
                                                            				url  : APP + '&mod=Diy&act=saveModel',
                                                            				data : sendData,
                                                            				dataType : 'json',
                                                            				success : function(result){
                                                             					//var jsonData = eval('('+result+')');
                                                                		 		frameArray[parentId][layout][index] = result['sign'];
                                                                		 		 if($('#'+id).html() == null){
                                                            			  		 $('#placeholder').html(result['html']);
                                                                		 		 $('#placeholder')
                                                                		 			.removeAttr('class')
                                                                					.removeAttr('style')
                                                                					.addClass('mb10')
                                                                					.attr('id',id)
                                                                					.attr('rel',namespace)
            																		.attr('sign',result['sign'])
                                                                		 			.prepend('<div class="diy_edit"><div class="ico_edit"><a href="javascript:void(0)" onclick="updateDiyModel(\''+id+'\',\''+namespace+'\')" class="ico_diyedit" title="设置">设置</a> <a href="javascript:void(0)" class="ico_diydel" onclick="deleteDiy(\'' + id + '\')" title="删除">删除</a></div></div>');
                                                        		        		 }else{
                                                        		    			 	$('#'+id).html(result['html']).attr('sign',result['sign'])
            ;
                                                        		    				$('#'+id).prepend('<div class="diy_edit"><div class="ico_edit"><a href="javascript:void(0)" onclick="updateDiyModel(\''+id+'\',\''+namespace+'\')" class="ico_diyedit" title="设置">设置</a> <a href="javascript:void(0)" class="ico_diydel" onclick="deleteDiy(\'' + id + '\')" title="删除">删除</a></div></div>');
                                                        		    
                                                        		    			 }
                                                            				}
                                                            			});
                                                                		
                                                                	}
                                        							$('.radio_select').click(function(){
                                        								if($(this).attr('checked')){
                                        									$('#'+$(this).attr('rel')).show();
                            												$('#'+$(this).attr('rel')+" textarea").focus();
                                        								}
																		var childrenNode = $('.param_select').not($('#'+$(this).attr('rel')))
                                        								childrenNode.hide();
																		childrenNode.children('select').val('');
                                        								//alert($('.param_select').not($('#'+$(this).attr('rel'))).html());
                                        							})
                                    								
                                	    							function changStyle(_this){
                                										if(_this.val() == 'top_2'){
                                											$('#uploadAttach').show();
                                										}else{
                                											$('#uploadAttach').hide();
                            												$("#attach_upload_data input[name='attach[]']").each(function(){
                                												$(this).remove();
                                											});
                                										}
                                    								}
                                									
                                                                    function getPostData(){
                                                                        var data = new Array();
                                                                        var result;
                                                                        var checkedName = new Array();
                                                                        $('.param_post').each(function(){
                                                                            switch ($(this).attr('type')) {
                                                                                case "checkbox":
                                                                                    if ($(this).attr('checked')) {
                                                                                        var postKey = 'PARAM_' + $(this).attr('name');
                                                                                        checkedName.push($(this).val());
                                                                                        break;
                                                                                    }
                                                                                    else {
                                                                                        return true;
                                                                                    }
                                                                                case "radio":
                                                                                        if ($(this).attr('checked')) {
                                                                                            var postKey = 'PARAM_' + $(this).attr('name');
                                                                                        }
                                                                                        else {
                                                                                            return true;
                                                                                        }
                                                                                    data[postKey] = $(this).val();
                                                                                    break;
                                                                                default:
                                                                                    var postKey = 'PARAM_' + $(this).attr('id');
																					if($(this).val() != null ){
            																		 	data[postKey] = $(this).val();
																					}
                                                                            }
                                                                        });
    																	data['PARAM_status'] = checkedName.join(',');
                                                                        var result = 'tagName=' + namespace;
																		
																				
																				   //取得参数值
					                                                    var newTempArray = new Array();
					                                                    $('.linkItems').each(function(){
																			var value = $('#' + $(this).attr('rel')).val().replace(/&/g,"[@]");
					                                                        newTempArray.push({
					                                                            'title': $(this).val(),
					                                                            'url': value
					                                                        });
					                                                    });
					                                                    
					                                                    for (var index in newTempArray) {
					                                                        result += '&head_link[' + index + '][title]=' + newTempArray[index]['title'] + '&head_link[' + index + '][url]=' + newTempArray[index]['url'];
					                                                    }
																				
																		$("#attach_upload_data input[name='attach[]']").each(function(){
            																result += '&attach[]='+$(this).val();
            															});
                                                                        if($('#style').val().indexOf('custom') != -1){
    																		var value = customTpl.replace(/&/g,"[@]");
    																		data['customContent'] = value;
    																	}
                                                                        for (var one in data) {
                                                                            result += '&' + one + '=' + data[one];
                                                                        }
                                                                        return result;
                                                                    }
                                    								        				
        					$('.attrSetTab a').click(function(){
        						var rel = $(this).attr('rel');
    							if(rel == "diy_customContent"){
    								getTpl($('#style').val());
    							}else{
    								if($('#customContent').val() != TplContent){
    									time = time + new String( customTplCount++ );
    									customTpl = $('#customContent').val();
    									var last = $('#style option:last').val();
    									if( last.indexOf('custom') == -1 ){
    										$('#style').append('<option value="'+time+'" selected>自定义模板</option>');
    									}else{
    										$('#style option:last').val(time).attr('selected','selected');
    									}
    								}
    							}
    							
    							$(this).addClass('on');
    							$('#tb_content_list').children('p').show();
        						$('.attrSetTab').children().not($(this)).removeClass('on');
        						$('.pop_up_box').children().not($('#' + rel)).hide();
        						$('#'+rel).show();
        					})
        					
            				function editTpl(tpl){
        						getTpl(tpl);
    							$('.attrSetTab a').each(function(){
    								if($(this).attr('rel') == 'diy_baseSet'){
    									$(this).removeClass('on');
    								}else{
    									$(this).addClass('on');
    								}
    							})
    							$('.attrSetTab a[rel=diy_customContent]').addClass('on');
    							$('.attrSetTab a[rel=diy_baseSet]').removeClass('on');
    							
    							//保存模板
    							$('#diy_saveTpl').click(function(){
    								$('.attrSetTab a[rel=diy_baseSet]').click();	
    							})
    							$('#tb_content_list').children('p').hide();
        						$('#diy_baseSet').hide();
        						$('#diy_customContent').show();
            				}
        					function getTpl(tpl){
    							if (tpl != time) {
    								if(typeof(tplData[tpl]) != 'undefined'){
    									$('#customContent').val(tplData[tpl]);
    									TplContent = tplData[tpl];
    									return ;
    								}
    								
    								$.post(APP + '&mod=Diy&act=getTpl', {
    									tpl: tpl,
    									tagName: namespace,
    									sign:sign
    								}, function(result){
    									$('#customContent').val(result);
    									tplData[tpl] = result;
    									TplContent = result;
    									$('#style').val(tpl);
    								});
    							}else{
    								$('#customContent').val(customTpl);
    							}
        					}
</script>
